<template>
	<h3>奶茶DIY生成器</h3>
	<h4>选择基底</h4>
	<div v-for="(base,index) in state.bases" :key="state.bases.index">
		<input type="radio"name='ba' v-model="state.selectbase" :value="base.name"/>{{base.name}}---{base.price}元
	</div>
	<h4>选择小料</h4>
	<div >
		<select v-model="state.selecttopping">
			<option v-for="(topping,index) in state.toppings" :key="state.toppings.index">{{topping.name}}--{{topping.price}}元</option>
		</select>
	</div>
	<div>
		<p>您选择的奶茶是：{{state.selectbase}}+{{state.selecttopping}}奶茶</p>
	</div>
</template>

<script setup>
	import {reactive} from 'vue'
	const state=reactive({
		bases:[
			{name:'四季茶',price:5},
			{name:'乌龙茶',price:5},
			{name:'椰乳',price:5}
		],
		toppings:[
			{name:'珍珠',price:2},
			{name:'奶盖',price:3},
			{name:'椰果',price:4}
		],
		selectbase:null,
		selecttopping:null
	})
</script>

<style>
</style>